<template>
  <div class="lang" @click="show = true">
    <div class="flex items-center">
      <img :src="flag" class="nation" />
      {{ $t('common.lang') }}
    </div>
  </div>
  <van-action-sheet close-on-click-action v-model:show="show" :actions="actions" @select="onSelect" />
</template>

<script setup lang="ts">
import cn from '~/assets/images/cn.png'
import ru from '~/assets/images/ru.png'

const store = useAppStore()

const language = ref(localStorage.getItem('localeLang'))

const show = ref(false)

const actions = [
  { name: '中文', value: 'zhCn' },
  { name: 'Русский', value: 'ruRu' }
]

const flag = computed(() => {
  return language.value == 'zhCn' ? cn : ru
})

const onSelect = (item: any) => {
  language.value = item.value
  store.changeLang(item.value)
}
</script>
<style lang="scss" scoped>
.nation {
  width: 24px;
  height: 16px;
  margin-right: 4px;
}
.lang {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 1.4rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 2px 12px;
}
</style>
